<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">


<!-- Mirrored from www.zi-han.net/theme/hplus/form_builder.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:19 GMT -->
<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />


<title>厚合尚品商城管理后台</title>

<link rel="shortcut icon" href="favicon.ico" />
<!-- <link rel="stylesheet" href="mng/css/bootstrap.min14ed.css?v=3.3.6"
	th:href="@{/mng/css/bootstrap.min14ed.css?v=3.3.6}" /> -->
<link rel="stylesheet" href="mng/css/bootstrap.min.css"
	th:href="@{/mng/css/bootstrap.min.css}" />
<link rel="stylesheet" href="mng/css/font-awesome.min93e3.css?v=4.4.0"
	th:href="@{/mng/css/font-awesome.min93e3.css?v=4.4.0}" />
<link rel="stylesheet" href="mng/css/animate.min.css"
	th:href="@{/mng/css/animate.min.css}" />
<link rel="stylesheet"
	href="mng/css/plugins/bootstrap-fileinput/fileinput.css"
	th:href="@{/mng/css/plugins/bootstrap-fileinput/fileinput.css}" />
<!-- <link rel="stylesheet"
	href="mng/css/plugins/webuploader/webuploader.css"
	th:href="@{/mng/css/plugins/webuploader/webuploader.css}" />
<link rel="stylesheet"
	href="mng/css/demo/webuploader-demo.min.css"
	th:href="@{/mng/css/demo/webuploader-demo.min.css}" /> -->
<link rel="stylesheet" href="mng/css/style.min862f.css?v=4.1.0"
	th:href="@{/mng/css/style.min862f.css?v=4.1.0}" />


<style>
.droppable-active {
	background-color: #ffe !important
}

.tools a {
	cursor: pointer;
	font-size: 80%
}

.form-body .col-md-6, .form-body .col-md-12 {
	min-height: 400px
}

.draggable {
	cursor: move
}
</style>

</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content">

		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>新增轮播图</h5>

					</div>
					<div class="ibox-content">

						<form role="form" class="form-horizontal m-t"
							th:action="@{/index/savepic}" method="post" enctype="multipart/form-data">

							<div class="form-group draggable">
								<label class="col-sm-3 control-label">图片名称：</label>
								<div class="col-sm-9">
									<input type="text" name="imgName" class="form-control"
										placeholder="请输入图片名称" />
								</div>
							</div>
							<div class="form-group draggable">
								<label class="col-sm-3 control-label">图片状态：</label>
								<div class="col-sm-9">
									<select class="form-control" name="imgStatus">
										<option value="0" selected="selected">未启用</option>
										<option value="1">启用</option>
									</select>
								</div>
							</div>
							<div class="form-group draggable">
								<label class="col-sm-3 control-label">是否有链接：</label>
								<div class="col-sm-9">
									<select class="form-control" name="haveHref">
										<option value="0" selected="selected">无</option>
										<option value="1">有</option>
									</select>
								</div>
							</div>
							<div class="form-group draggable">
								<label class="col-sm-3 control-label">链接地址：</label>
								<div class="col-sm-9">
									<input type="text" name="imgHref" class="form-control"
										placeholder="如有链接请填写，无则忽略" />
								</div>
							</div>
							<div class="form-group draggable">
								<label class="col-sm-3 control-label">排序值：</label>
								<div class="col-sm-9">
									<input type="text" name="sortValue" class="form-control"
										placeholder="值越小越靠前，如 1" />
								</div>
							</div>
							<div class="form-group draggable">
								<label class="col-sm-3 control-label">图片：</label>
								<div class="col-sm-9">
									<input id="file" name="myfile" type="file" data-show-caption="true" />  
                <p class="help-block">支持jpg、jpeg、png格式，大小不超过2.0M</p>  
									<!-- <div id="uploader-demo">
										用来存放文件信息
										<div id="fileList" class="uploader-list"></div>
										<div id="filePicker">选择图片</div>
									</div> -->

								</div>
							</div>

							<div class="hr-line-dashed"></div>
							<div class="form-group draggable">
								<div class="col-sm-12 col-sm-offset-3">
									<button class="btn btn-primary" type="submit">保存</button>
									<button class="btn btn-white" type="reset">重置</button>
								</div>
							</div>
						</form>
						<div class="clearfix"></div>
					</div>

				</div>
			</div>

		</div>
	</div>

	<script src="mng/js/jquery.min.js?v=2.1.4"
		th:src="@{/mng/js/jquery.min.js?v=2.1.4}"></script>
	<script src="mng/js/bootstrap.min.js?v=3.3.6"
		th:src="@{/mng/js/bootstrap.min.js?v=3.3.6}"></script>
	
	<script src="mng/js/hplus.min.js?v=4.1.0"
		th:src="@{/mng/js/hplus.min.js?v=4.1.0}"></script>
		
	<script src="mng/js/plugins/bootstrap-fileinput/fileinput.min.js"
		th:src="@{/mng/js/plugins/bootstrap-fileinput/fileinput.min.js}"></script>
	<script src="mng/js/plugins/bootstrap-fileinput/zh.js"
		th:src="@{/mng/js/plugins/bootstrap-fileinput/zh.js}"></script>
	<script type="text/javascript">
	function initFileInput(ctrlName) {      
        var control = $('#' + ctrlName);   
        control.fileinput({  
            language: 'zh', //设置语言  
           // uploadUrl: uploadUrl,  //上传地址  
            showUpload: false, //是否显示上传按钮  
            showRemove:true,  
             dropZoneEnabled: false,  
            showCaption: true,//是否显示标题  
            allowedPreviewTypes: ['image'],  
                allowedFileTypes: ['image'],  
                allowedFileExtensions:  ['jpg', 'png'],  
                maxFileSize : 2000,  
            maxFileCount: 1,  
            uploadAsync: false,
            //initialPreview: [   
                    //预览图片的设置  
              //      "<img src='http://127.0.0.1:8080/NewsManageSys/plugin/umeditor1_2_2/jsp/upload/20161030/55061                       477813913474.jpg' class='file-preview-image' alt='肖像图片' title='肖像图片' />",  
            //],  
              
        }).on("filebatchselected", function(event, files) {  
            $(this).fileinput("upload");  
            })  
            .on("fileuploaded", function(event, data) {  
                $("#path").attr("value",data.response);  
        });  
    }  
      
    $(function () {  
       // var path="${base}/admin/product/upload.htm";  
        initFileInput("file");  
          
    }) 
	</script>	
	<!-- <script type="text/javascript">
        var BASE_URL = 'mng/js/plugins/webuploader/index.html';
    </script>
	<script src="mng/js/plugins/webuploader/webuploader.min.js"
		th:src="@{/mng/js/plugins/webuploader/webuploader.min.js}"></script>
	<script type="text/javascript">
	// 初始化Web Uploader
	var uploader = WebUploader.create({

	    // 选完文件后，是否自动上传。
	    auto: true,

	    // swf文件路径
	    swf: BASE_URL + '/js/Uploader.swf',

	    // 文件接收服务端。
	    server: 'http://webuploader.duapp.com/server/fileupload.php',

	    // 选择文件的按钮。可选。
	    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	    pick: '#filePicker',

	    // 只允许选择图片文件。
	    accept: {
	        title: 'Images',
	        extensions: 'gif,jpg,jpeg,bmp,png',
	        mimeTypes: 'image/*'
	    }
	});
	// 当有文件添加进来的时候
	uploader.on( 'fileQueued', function( file ) {
	    var $li = $(
	            '<div id="' + file.id + '" class="file-item thumbnail">' +
	                '<img/>' +
	                '<div class="info">' + file.name + '</div>' +
	            '</div>'
	            ),
	        $img = $li.find('img');


	    // $list为容器jQuery实例
	    $list.append( $li );

	    // 创建缩略图
	    // 如果为非图片文件，可以不用调用此方法。
	    // thumbnailWidth x thumbnailHeight 为 100 x 100
	    uploader.makeThumb( file, function( error, src ) {
	        if ( error ) {
	            $img.replaceWith('<span>不能预览</span>');
	            return;
	        }

	        $img.attr( 'src', src );
	    }, thumbnailWidth, thumbnailHeight );
	});
	// 文件上传过程中创建进度条实时显示。
	uploader.on( 'uploadProgress', function( file, percentage ) {
	    var $li = $( '#'+file.id ),
	        $percent = $li.find('.progress span');

	    // 避免重复创建
	    if ( !$percent.length ) {
	        $percent = $('<p class="progress"><span></span></p>')
	                .appendTo( $li )
	                .find('span');
	    }

	    $percent.css( 'width', percentage * 100 + '%' );
	});

	// 文件上传成功，给item添加成功class, 用样式标记上传成功。
	uploader.on( 'uploadSuccess', function( file ) {
	    $( '#'+file.id ).addClass('upload-state-done');
	});

	// 文件上传失败，显示上传出错。
	uploader.on( 'uploadError', function( file ) {
	    var $li = $( '#'+file.id ),
	        $error = $li.find('div.error');

	    // 避免重复创建
	    if ( !$error.length ) {
	        $error = $('<div class="error"></div>').appendTo( $li );
	    }

	    $error.text('上传失败');
	});

	// 完成上传完了，成功或者失败，先删除进度条。
	uploader.on( 'uploadComplete', function( file ) {
	    $( '#'+file.id ).find('.progress').remove();
	});
	</script> -->
</body>


<!-- Mirrored from www.zi-han.net/theme/hplus/form_builder.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:20 GMT -->
</html>
